let currentSlideIndex = 0;

function showSlide(index) {
    const slides = document.querySelectorAll("#slider li");
    const dots = document.querySelectorAll("#dots li");

    if (index >= slides.length) {
        currentSlideIndex = 0;
    } else if (index < 0) {
        currentSlideIndex = slides.length - 1;
    } else {
        currentSlideIndex = index;
    }

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        dots[i].classList.remove("active");
    }

    slides[currentSlideIndex].style.display = "block";
    dots[currentSlideIndex].classList.add("active");
}

function nextSlide() {
    showSlide(currentSlideIndex + 1);
}

function prevSlide() {
    showSlide(currentSlideIndex - 1);
}

function currentSlide(index) {
    showSlide(index);
}

// Automatically advance to the next slide every 3 seconds
setInterval(nextSlide, 3000);